<template>
  <div class="personalCenter">
    <!-- 子路由的占位符 -->
    <router-view></router-view>
    <!-- 个人中心模块的底部导航条区域 -->
    <!-- 开启路由模式 -->
    <van-tabbar route>
      <van-tabbar-item to="/home">
        <!-- 这里使用我们自己的图标 ，所以用到组件的插槽 -->
        <i
          slot="icon"
          class="toutiao toutiao-shouye"
        ></i>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/answer">
        <i
          slot="icon"
          class="toutiao toutiao-wenda"
        ></i>
        <span>问答</span>
      </van-tabbar-item>
      <van-tabbar-item to="/video">
        <i
          slot="icon"
          class="toutiao toutiao-shipin"
        ></i>
        <span>视频</span>
      </van-tabbar-item>
      <van-tabbar-item to="/mine">
        <i
          slot="icon"
          class="toutiao toutiao-wode"
        ></i>
        <span>{{this.$store.state.token ? '我的' : '未登录' }}</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'PersonalCenter',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {

    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {}
}
</script>

<style scoped lang="less">
.toutiao {
  font-size: 40px;
}
span {
  font-size: 20px;
}
</style>
